<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iphone lock</title>
	<style>
		#iphone {
			position: relative;
			width: 426px;
			height: 640px;
			margin: 10px auto; 
			background: #000 url(http://fgm.cc/iphone/1.jpg) no-repeat top left;
		}
		
		#lock {
			position: absolute;
			z-index: 10;
			top: 546px;
			left: 34px;
			width: 358px;

		}
		#button {
			position: absolute;
			display: block;
			width: 93px;
			height: 62px;
			cursor: pointer;
			background: #000 url(http://fgm.cc/iphone/btn.jpg) no-repeat top left;
		}

	</style>
</head>
<body>
	<div id="iphone">
		<div id="lock">
			<span id='button'></span>
		</div>
	</div>
</body>
<script>
	window.onload=function(){
		var lock = document.getElementById('lock');
		var button = document.getElementById('button');
		// button.onmousedown=function(e){
		// 	var e = e|| event;
		// 	console.log(e.clientX);
		// 	console.log(lock.offsetLeft);
		// 	console.log(button.offsetLeft);
			
		// }



		//  
	}
// function drag(o,s)  
// {  
//     if (typeof o == "string") o = document.getElementById(o);  
//     o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;  
//     o.orig_y = parseInt(o.style.top) - document.body.scrollTop;  
//     o.orig_index = o.style.zIndex;  
          
//     o.onmousedown = function(a)  
//     {  
//         this.style.cursor = "move";  
//         this.style.zIndex = 10000;  
//         var d=document;  
//         if(!a)a=window.event;  
//         var x = a.clientX+d.body.scrollLeft-o.offsetLeft;  
//         var y = a.clientY+d.body.scrollTop-o.offsetTop;  
//         //author: www.longbill.cn  
//         d.ondragstart = "return false;"  
//         d.onselectstart = "return false;"  
//         d.onselect = "document.selection.empty();"  
                  
//         if(o.setCapture)  
//             o.setCapture();  
//         else if(window.captureEvents)  
//             window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  

//         d.onmousemove = function(a)  
//         {  
//             if(!a)a=window.event;  
//             o.style.left = a.clientX+document.body.scrollLeft-x;  
//             o.style.top = a.clientY+document.body.scrollTop-y;  
//             o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;  
//             o.orig_y = parseInt(o.style.top) - document.body.scrollTop;  
//         }  

//         d.onmouseup = function()  
//         {  
//             if(o.releaseCapture)  
//                 o.releaseCapture();  
//             else if(window.captureEvents)  
//                 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
//             d.onmousemove = null;  
//             d.onmouseup = null;  
//             d.ondragstart = null;  
//             d.onselectstart = null;  
//             d.onselect = null;  
//             o.style.cursor = "normal";  
//             o.style.zIndex = o.orig_index;  
//         }  
//     }  
      
//     if (s)  
//     {  
//         var orig_scroll = window.onscroll?window.onscroll:function (){};  
//         window.onscroll = function ()  
//         {  
//             orig_scroll();  
//             o.style.left = o.orig_x + document.body.scrollLeft;  
//             o.style.top = o.orig_y + document.body.scrollTop;  
//         }  
//     }  
// }   
	


</script>
</html>
